<script setup>
import { ref, computed, onMounted } from 'vue';
import CodeBlock from '@components/CodeBlock.vue';

// 1. 自动暴露响应式状态
const count = ref(0);
const message = ref('Hello Vue 3 Script Setup!');

// 2. 计算属性
const doubleCount = computed(() => count.value * 2);

// 3. 方法定义
const increment = () => count.value++;
const updateMessage = (newMsg) => message.value = newMsg;

// 4. 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
  console.log(`当前计数: ${count.value}`);
});

// 5. 事件处理
const handleClick = () => {
  increment();
  updateMessage(`点击次数: ${count.value}`);
};

// 6. 定义组件props和emits（简化方式）
// 注意：在script setup中，defineProps和defineEmits是编译器宏，不需要导入
const props = defineProps({
  title: {
    type: String,
    default: 'Script Setup 演示'
  }
});

const emit = defineEmits(['update:title', 'count-change']);

// 7. 使用props和emits
const changeTitle = () => {
  emit('update:title', `新标题 - ${Date.now()}`);
};

const notifyCountChange = () => {
  emit('count-change', count.value);
};

// 代码示例内容 - 使用HTML转义字符
const codeExample = `// Script Setup示例代码
&lt;script setup&gt;
import { ref, computed } from 'vue';

// 自动暴露给模板
const count = ref(0);
const doubleCount = computed(() => count.value * 2);

// 方法也自动暴露
const increment = () => count.value++;

// 简化的props声明
const props = defineProps({
  title: String
});

// 简化的emits声明
const emit = defineEmits(['update']);
&lt;/script&gt;

&lt;template&gt;
  &lt;h2&gt;&#123;&#123; title &#125;&#125;&lt;/h2&gt;
  &lt;p&gt;Count: &#123;&#123; count &#125;&#125;&lt;/p&gt;
  &lt;p&gt;Double: &#123;&#123; doubleCount &#125;&#125;&lt;/p&gt;
  &lt;button @click="increment"&gt;Increment&lt;/button&gt;
&lt;/template&gt;`;
</script>

<template>
  <div class="script-setup-demo">
    <div class="demo-header">
      <h2>{{ title }}</h2>
      <button @click="changeTitle" class="demo-btn">更新标题</button>
    </div>
    
    <div class="demo-content">
      <!-- 响应式状态展示 -->
      <div class="feature-section">
        <h3>✅ 自动暴露的响应式状态</h3>
        <p class="message">{{ message }}</p>
      </div>
      
      <!-- 计数器功能 -->
      <div class="feature-section counter-section">
        <h3>✅ 计数与计算属性</h3>
        <div class="counter">
          <p>当前计数: <strong>{{ count }}</strong></p>
          <p>双倍计数: <strong class="highlight">{{ doubleCount }}</strong></p>
          <div class="controls">
            <button @click="handleClick" class="primary-btn">增加计数</button>
            <button @click="notifyCountChange" class="secondary-btn">通知计数变化</button>
          </div>
        </div>
      </div>
      
      <!-- 特性列表 -->
      <div class="feature-section">
        <h3>✅ Script Setup 主要特性</h3>
        <ul class="feature-list">
          <li>自动暴露响应式状态和方法给模板</li>
          <li>简化的 props 声明（defineProps 编译器宏）</li>
          <li>简化的 emits 声明（defineEmits 编译器宏）</li>
          <li>直接使用组合式 API 函数</li>
          <li>更好的类型推导和IDE支持</li>
          <li>更小的运行时代码体积</li>
          <li>简化的生命周期钩子使用</li>
        </ul>
      </div>
      
      <!-- 代码展示 -->
      <div class="feature-section code-section">
        <h3>✅ 代码示例</h3>
        <CodeBlock 
          :code="codeExample ? codeExample.replace(/CDATA\[([\s\S]*?)\]\/\>/g, '$1') : ''" 
          language="vue" 
          :showLineNumbers="true" 
          :defaultDarkMode="false"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.script-setup-demo {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.demo-header h2 {
  margin: 0;
  color: #333;
  font-size: 2rem;
}

.feature-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #fafafa;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.feature-section h3 {
  margin-top: 0;
  color: #667eea;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.message {
  font-size: 1.1rem;
  color: #666;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.counter-section .counter {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
}

.counter p {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.highlight {
  color: #667eea;
  font-size: 1.2em;
}

.controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.demo-btn,
.primary-btn,
.secondary-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.demo-btn {
  background: #667eea;
  color: white;
}

.demo-btn:hover {
  background: #764ba2;
  transform: translateY(-2px);
}

.primary-btn {
  background: #667eea;
  color: white;
}

.primary-btn:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

.secondary-btn {
  background: #e2e8f0;
  color: #4a5568;
}

.secondary-btn:hover {
  background: #cbd5e0;
  transform: translateY(-1px);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 0.8rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: #555;
}

.feature-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

.code-section {
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 12px;
}

.code-section h3 {
  color: #e0e0e0;
}

.code-block {
  overflow-x: auto;
  background: #252526;
  border-radius: 8px;
  padding: 1rem;
}

pre {
  margin: 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

code {
  color: #d4d4d4;
}

@media (max-width: 768px) {
  .script-setup-demo {
    padding: 1.5rem;
  }
  
  .demo-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .controls {
    flex-direction: column;
  }
  
  .feature-section {
    padding: 1rem;
  }
}
</style>